import '@/assets/css/index.less'
import 'amfe-flexible'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import 'element-plus/theme-chalk/el-loading.css'

import App from './App.vue'
import router from './router'
import microApp from '@micro-zoe/micro-app'

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.use(router)

app.directive('throttle', {
  mounted(el, binding) {
    let { throttleTime } = binding.value
    if (!throttleTime) {
      throttleTime = 1000
    }
    let timer = null
    let disable = false
    el.addEventListener(
      'click',
      event => {
        if (timer) {
          clearTimeout(timer)
        }
        if (!disable) {
          disable = true
        } else {
          event && event.stopImmediatePropagation()
        }
        timer = setTimeout(() => {
          timer = null
          disable = false
        }, throttleTime)
      },
      true
    )
  }
})

app.mount('#app')

microApp.start({
  lifeCycles: {
    created(e, appName) {
      console.log(`子应用${appName}被创建`)
    },
    beforemount(e, appName) {
      console.log(`子应用${appName}即将渲染`)
    },
    mounted(e, appName) {
      console.log(`子应用${appName}已经渲染完成`)
    },
    unmount(e, appName) {
      console.log(`子应用${appName}已经卸载`)
    },
    error(e, appName) {
      console.log(`子应用${appName}加载出错`)
    }
  }
})
